<script lang="ts" setup>

import {ref, onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import router from '@/router'
import { Plus } from '@element-plus/icons-vue'

import {
  Edit,
} from '@element-plus/icons-vue'

import{apiUserList,apiUserDetail,apiUserUpdate, apiUserResetPW,apiDfsUpload} from "@/api/api"
import{formatTagUserStatus,formatUserStatus,formatUserType} from "@/utils/format"
import {backTo} from '@/utils/jump'
import {validEmail} from "@/utils/validate"

const userId = ref(useRoute().query.id)
const userDetail = ref({})
const newImageUrl = ref()

const paramUpdate= ref({
  openFlag: false,

})

async function handleUserDetail(){

  const data = await apiUserDetail(userId.value)
  if (data == "") {
      console.log(data)
      ElMessage.error("获取失败， 请联系管理员")
      return 
  }
  userDetail.value = data


  paramUpdate.value.id= data.id
  paramUpdate.value.username= data.username
  paramUpdate.value.nickname= data.nickname
  paramUpdate.value.email= data.email
  paramUpdate.value.mobile= data.mobile

}


onMounted(() => {
  handleUserDetail()

})


async function handlerUpdateFile(){
  const file = document.querySelector('input[type=file]').files[0]
  const resp  = await apiDfsUpload(file)
  if (resp.code != 0) {
        console.log(resp)
        ElMessage.error("上传失败， 请联系管理员")
        return 
  }
  newImageUrl.value = "http://192.168.2.8:8899/downloads/"+resp.msg
}

async function handlerUpdateUserInfo(){

  if (newImageUrl.value != "") {
    paramUpdate.value.avatar= newImageUrl.value
  }
  if (paramUpdate.value.email) {
    
  if (!validEmail(paramUpdate.value.email)) {
    ElMessage.error('请输入有效邮箱')
      return
  }
  }

  const resp = await apiUserUpdate(paramUpdate.value)
  if (resp.code != 0) {
        console.log(resp)
        ElMessage.error("执行失败， 请联系管理员")
        return 
   }
  ElMessage({
      message: '修改成功！',
      type: 'success',
    })
  handleUserDetail()
  paramUpdate.openFlag= false
}

const paramResetPW= ref({
  openFlag: false,
})

async function handlerResetPW(){
  if (paramResetPW.value.pw == ""){
    ElMessage.error("请输入新密码")
    return 
  }
  if (paramResetPW.value.pw != paramResetPW.value.cpw){
    ElMessage.error("密码不同，请重新输入")
    return 
  }
  const req = {
    id: userDetail.value.id,
    password: paramResetPW.value.pw
  }

  const resp = await apiUserResetPW(req)
  if (resp.code != 0) {
        console.log(resp)
        ElMessage.error("执行失败， 请联系管理员")
        return 
   }
  ElMessage({
      message: '修改成功！',
      type: 'success',
    })
  handleUserDetail()
  paramResetPW.openFlag= false
}



</script>

<template>
  <el-button  type="primary" @click="backTo" >返回</el-button>

  <div class="info_box">
    
  <el-descriptions title="用户信息" :column="1" >
    <template #extra>
          <el-button type="primary" :icon="Edit" circle  @click="paramUpdate.openFlag = true"/>
    </template>
    <el-descriptions-item label="用户名">{{userDetail.username}}</el-descriptions-item>
    <el-descriptions-item label="头像">
        <el-image
            style="width: 100px; height: 100px"
            :src="userDetail.avatar"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :initial-index="4"
            fit="cover"
          />
        <!-- </div> -->
          <!-- <el-avatar size="large" :src="userDetail.avatar" /> -->
    </el-descriptions-item>
    <el-descriptions-item label="昵称">{{userDetail.nickname}}</el-descriptions-item>
    <el-descriptions-item label="邮箱">{{userDetail.email}}</el-descriptions-item>
    <el-descriptions-item label="电话">{{userDetail.mobile}}</el-descriptions-item>
    <el-descriptions-item label="密码">
        <el-button type="danger" size="small" round @click="paramResetPW.openFlag=true">重置</el-button>
    </el-descriptions-item>
    <el-descriptions-item label="用户类型">          {{formatUserType(userDetail.userType)}}
</el-descriptions-item>
    <el-descriptions-item label="用户状态">
        <el-tag  :type="formatTagUserStatus(userDetail.status)">
            {{formatUserStatus(userDetail.status)}}
        </el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="创建时间">{{userDetail.createTime}}</el-descriptions-item>

    <el-descriptions-item label="最近登录IP">{{userDetail.loginIp}}</el-descriptions-item>
    <el-descriptions-item label="最近登录时间">{{userDetail.loginDate}}</el-descriptions-item>
    
  </el-descriptions>
  </div>

  <el-dialog v-model="paramUpdate.openFlag" :show-close="false"  title="修改用户信息" >

<div class="box" >
 <el-form :model="userDetail" label-position="right"      label-width="100px">

    <el-form-item label="用户名">
      <el-input v-model="paramUpdate.username" />
    </el-form-item>
    <el-form-item label="头像">
        <el-upload
      ref="uploadRef"
      :multiple:="false"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handlerUpdateFile"
  >
      <!-- <el-input v-model="paramUpdate.username" /> -->
        <img v-if="newImageUrl" :src="newImageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="昵称">
      <el-input v-model="paramUpdate.nickname" />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="paramUpdate.email" />
    </el-form-item>
    <el-form-item label="电话">
      <el-input v-model="paramUpdate.mobile" />
    </el-form-item>
  </el-form>
    <el-button-group class="right_button">
    <el-button type="primary" @click="handlerUpdateUserInfo">确定</el-button>
    <el-button type="primary" @click="paramUpdate.openFlag=false">取消</el-button>
    </el-button-group>
</div>
  </el-dialog>

  <el-dialog v-model="paramResetPW.openFlag" :show-close="false"   title="重置密码">
<div class="box" >
 <el-form :model="paramResetPW" label-position="right"      label-width="100px">
    <el-form-item label="新密码">
      <el-input     type="password" placeholder="请输入新密码" show-password v-model="paramResetPW.pw" />
    </el-form-item>
    <el-form-item label="确认密码">
      <el-input     type="password" placeholder="请确认新密码" show-password v-model="paramResetPW.cpw" />

    </el-form-item>
  </el-form>
    <el-button-group class="right_button">
    <el-button type="primary" @click="handlerResetPW">确定</el-button>
    <el-button type="primary" @click="paramResetPW.openFlag=false">取消</el-button>
    </el-button-group>
</div>
  </el-dialog>
</template>


<style scoped>
  .right_button{
  float: right;
}
.box{
  background-color: white;
  padding: 2em;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>